// Base theme to override
// Without this CSS, the Autocomplete component doesn't initialise correctly
@import "@algolia/autocomplete-theme-classic";

:root {
    // Also referenced in Autocomplete.tsx - grep "detachedMediaQuery"
    --aa-detached-media-query: (max-width: $lg);
    --aa-detached-modal-media-query: (min-width: $md);
    --aa-detached-modal-max-width: $md;
    --aa-muted-color-rgb: $blue-20;
}

// base styles
// desktop expanded
// desktop inactive
// mobile expanded
// mobile inactive

.aa-DetachedFormContainer .aa-Form,
.aa-Autocomplete[aria-expanded="true"] .aa-Form {
    box-shadow: none;
    border-color: $blue-20;
    background-color: #fff;
    &:focus-within {
        box-shadow: none;
    }
}

.aa-Form {
    height: $search-cta-height;
    border-radius: 0;
    border-color: transparent;
    border-width: 1px;

    &:focus-within {
        border-color: transparent;
        box-shadow: none;
    }

    @include md-up {
        background-color: $blue-90;
    }

    @include md-down {
        border: none;
    }
}

.aa-Input {
    margin-left: 8px;
    text-overflow: ellipsis;
    @include sm-up {
        margin-left: 16px;
        font-size: 14px; // shouldn't be set for mobile (ios zooms in on focus when font-size is < 16px)
    }
    color: $blue-30;
    &:focus {
        color: $blue-90;
    }
}

.aa-Input::placeholder {
    color: $blue-30;
}

.aa-InputWrapperPrefix {
    order: 5;
    @include md-down {
        display: none;
    }
}

.aa-DetachedSearchButton {
    padding: 0;
    background: none;
    border: none;
}

.aa-DetachedSearchButtonPlaceholder,
.aa-DetachedSearchButtonQuery {
    display: none;
}

.aa-SubmitButton {
    line-height: 0.7;
    cursor: pointer;

    &:hover {
        .aa-SubmitIcon {
            fill: $blue-90;
        }
    }
}

.aa-Form:invalid .aa-SubmitButton {
    cursor: unset;
    pointer-events: none;
    svg {
        fill: $blue-20;
    }
}

.aa-Autocomplete[aria-expanded="false"] .aa-SubmitButton:hover .aa-SubmitIcon {
    fill: $blue-20;
}

.aa-DetachedCancelButton {
    color: $blue-90;
    background: #fff;
    // above the placeholder text on mobile
    z-index: 1;
    border-radius: 0;
    border: none;
    padding: 8px;
    &:hover,
    &:focus,
    &:focus-visible {
        background: $blue-10;
        box-shadow: none;
        outline: none;
    }
}

.aa-SubmitButton,
.aa-DetachedSearchButtonIcon {
    svg {
        fill: $blue-50;
        color: $blue-50;
        stroke: none;
    }
}

// A magic number slightly higher than our $md breakpoint to ensure there's enough room
// for everything in the site nav between 960-1045px. Mirrored in Autocomplete.tsx
@media (max-width: 1045px) {
    .aa-DetachedSearchButtonIcon svg {
        fill: #fff;
    }
}

.aa-ClearButton {
    padding: 0 16px;
    &:hover {
        .aa-ClearIcon {
            background-color: $blue-60;
        }
    }
    &::after {
        content: "";
        height: 16px;
        border-right: 1px solid $blue-20;
        left: 16px;
        position: relative;
    }
    .aa-ClearIcon {
        width: 16px;
        height: 16px;
        padding: 2px;
        border-radius: 8px;
        background-color: $blue-50;
        fill: #fff;
    }
}

.aa-Autocomplete[aria-expanded="false"] .aa-ClearButton {
    display: none;
}

.aa-Panel {
    z-index: $zindex-lightbox + 1;
    margin: 0;
    border-radius: 0;
    border: none;
    outline: none;
    box-shadow: none;
}

.aa-PanelLayout {
    margin: 6px;
    padding: 0;
}

/*
 * Autocomplete item contents styles
 */

.aa-Item {
    display: flex;
    padding: 4px 10px;
    min-height: 45px;
    line-height: 1.5;
    color: $blue-90;
    border-radius: 0;

    &[aria-selected="true"] {
        background-color: $blue-5;
    }
}

section[data-autocomplete-source-id="recentSearchesPlugin"] {
    .aa-ItemIcon {
        @include autocomplete-item-icon;
    }
    .aa-ItemContentTitle {
        @include body-3-medium;
        font-weight: bold;

        mark {
            font-weight: normal;
        }
    }
    .aa-ItemActionButton {
        &:hover {
            background-color: $blue-20;
        }
        svg {
            @include autocomplete-item-icon;
        }
        &:focus {
            background: $blue-20;
            outline: none;
        }
    }
}

.autocomplete-item-contents {
    @include body-3-medium;
    display: flex;
    gap: 8px;
    align-items: baseline;
    width: 100%; // for ellispses on the query to work
}

section[data-autocomplete-source-id="filters"] {
    .search-filter-pill {
        flex-shrink: 0;
    }
}

section[data-autocomplete-source-id="autocomplete"] {
    .autocomplete-item-contents__contentType {
        margin-left: 8px;
        color: $blue-50;
    }
}

.autocomplete-item-contents__type-icon {
    @include autocomplete-item-icon;
}

.autocomplete-item-contents__query--only {
    text-wrap: pretty;
}

.autocomplete-item-contents__query--highlighted {
    font-weight: bold;
}

.autocomplete-item-contents__query--unmatched {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
